import { connect } from 'dva';
import React, { useEffect, useState } from 'react';
import config from '../../config';
import NewsCenter from '../newsCenter/index';
import styles from './index.less';


const board = props => {
  const { form, dispatch } = props;
  const [status, setStatus] = useState(false)
  const [list, setList] = useState([])
  const [caseList, setCaseList] = useState([])
  const [selectId, setSelectId] = useState('')
  const [showInfo, setShowInfo] = useState({})
  const [index, setIndex] = useState(0)
  useEffect(() => {
    dispatch({
      type: 'Public/getContentList',
      payload: { categoryId: props.id, pageSize: '2' }
    }).then((res) => {
      setList(res?.data?.rows || [])
    })
    dispatch({
      type: 'Public/getContentList',
      payload: { categoryId: '1601056978908164098', pageSize: '5' }
    }).then((res) => {
      setCaseList(res?.data?.rows || [])
      setSelectId(res?.data?.rows?.[0]?.id)
      setShowInfo(res?.data?.rows?.[0])
    })
  }, [])
  const tag = showInfo?.contentKeyword?.split('；') || []
  const contentImg = showInfo?.contentImg && JSON.parse(showInfo?.contentImg)
  return (
    <div className={styles.board}>
      {
        list?.map((i, index) => {
          const contentImg = i?.contentImg && JSON.parse(i?.contentImg)
          if (index + 1 % 2 == 1) {
            return <div className={styles.banner}>
              <div className={styles.bannerImg}>
                <img className={styles.bannerPC} src={config.targetUrl + contentImg?.[0]?.path} />
                <img className={styles.bannerApp} src={config.targetUrl + contentImg?.[0]?.path} />
              </div>
              <div className={styles.textBox}>
                <span className={styles.title}>{i.contentTitle}</span>
                <span className={styles.desc}
                >{i.contentDescription}</span>
                <div className={styles.btnBox}>
                  <span className={styles.text}>了解更多</span>
                  <img
                    className={styles.bgImg}
                    referrerpolicy="no-referrer"
                    src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1ba37ddc0fafd0178def2e069697a22bc0b89ffd0ffa5802235da293dca9b2cd"
                  />
                </div>
              </div>
            </div>
          } else {
            return <div className={styles.banner}>
              <div className={styles.bannerImg}>
                <img className={styles.bannerPC} src={config.targetUrl + contentImg?.[0]?.path} />
                <img className={styles.bannerApp} src={config.targetUrl + contentImg?.[0]?.path} />
              </div>
              <div className={styles.textBox}>
                <span className={styles.title}>{i.contentTitle}</span>
                <span className={styles.desc}
                >{i.contentDescription}</span>
                <div className={styles.btnBox}>
                  <span className={styles.text}>了解更多</span>
                  <img
                    className={styles.bgImg}
                    referrerpolicy="no-referrer"
                    src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1ba37ddc0fafd0178def2e069697a22bc0b89ffd0ffa5802235da293dca9b2cd"
                  />
                </div>
              </div>
            </div>
          }
        })
      }
      <div className={styles.container}>
        <div className={styles.tabBox}>
          {
            caseList?.map(i => {
              return <div className={selectId == i.id ? styles.tabItemBoxActive : styles.tabItemBox} onClick={() => {
                setSelectId(i.id)
                setShowInfo(i)
              }}>
                <span className={selectId == i.id ? styles.tabItemActive : styles.tabItem}>{i.contentTitle}</span>
              </div>
            })
          }
          {/* <div className={styles.tabItemBoxActive}>
            <span className={styles.tabItemActive}>私家智能定制APP</span>
          </div>
          <div className={styles.tabItemBox}>
            <span className={styles.tabItem}>公司业绩统计管理系统</span>
          </div>
          <div className={styles.tabItemBox}>
            <span className={styles.tabItem}>大数据解决方案</span>
          </div>
          <div className={styles.tabItemBox}>
            <span className={styles.tabItem}>公司业绩统计管理系统</span>
          </div>
          <div className={styles.tabItemBox}>
            <span className={styles.tabItem}>大数据解决方案</span>
          </div> */}
        </div>
        <div className={styles.caseBox}>
          <div className={styles.caseLeft}>
            <div className={styles.title}>{showInfo.contentTitle}</div>
            <div className={styles.describe}>{showInfo.contentDescription}</div>
            <div className={styles.tagList}>
              {
                tag?.map(v => {
                  return <div className={styles.labelInfo}>
                    <img src={'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2dee15ac1baef3a57e12ae54841e24bccecd52e837c8957fbdb8c8ec16a04089'} />
                    <div className={styles.label}>{v}</div>
                  </div>
                })
              }
            </div>
          </div>
          <div className={styles.caseRight}>
            <img src={config.targetUrl + contentImg?.[0]?.path} style={{ width: '100%', }} />
          </div>
        </div>
        <div className={styles.caseBottom}>
          <img
            className={styles.caseBottomImg}
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb7eab6c2fe053dd4344cbf1f5c6dc1c44858ca064d0fac20590838c798218177"
            onClick={() => {
              if (index != 0) {
                setIndex(index - 1)
                setShowInfo(caseList[index - 1])
              }
            }}
          />
          <div className={styles.caseBottomPageBox}>
            <span className={styles.caseBottomPage}>{index + 1}</span>
            <span className={styles.caseBottomPage}>/{caseList?.length}</span>
          </div>
          <img
            className={styles.caseBottomImg}
            referrerpolicy="no-referrer"
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng603636f31137e1be478c88525caec22687ac8f294c7b74633345a923bbfdf418"
            onClick={() => {
              if (index != (caseList.length - 1)) {
                setIndex(index + 1)
                setShowInfo(caseList[index + 1])
              }
            }}
          />
        </div>

      </div>
      <NewsCenter {...props} id="1601057032729473026" />
    </div>
  );
};

export default connect(({ }) => ({}))(board);
